<template>
    <scroll-page :loading="loading" :offset="offset" :no-data="noData" v-on:load="load">
        <article-item v-for="article in articles" :key="article.id" v-bind="article">
        </article-item>
    </scroll-page>
</template>

<script>
    import ArticleItem from '@/components/article/ArticleItem'
    //里面54行触发事件
    import ScrollPage from '@/components/scrollpage'
    import {getArticles} from '@/api/article'

    export default {
        name: "ArticleScrollPage",
        props: {
            // //应该由父组件传，需要滚动的高度
            // offset: {
            //     type: Number,
            //     default: 0
            // }

            query:{
                type: Object,
                default(){
                    return {}
                }
            }
        },
        watch: {
        },
        created() {
            this.getArticles()
        },
        data() {
            return {
                //加载
                loading: false,
                //数据
                noData: false,
                offset: 0,
                //分页信息
                innerPage:{
                    page: 1,
                    pageSize:10,
                    tagId:null,
                    categoryId:null
                },
                //文章列表
                articles: []
            }
        },
        methods: {
            load() {
                //下拉触发分页的时候 进行接口加载
                // alert("触发分页")
                this.getArticles()
            },
            //得到文章
            getArticles() {
                let that = this
                that.loading = true
                that.innerPage.tagId = this.query.tagId;
                that.innerPage.categoryId = this.query.categoryId;
                getArticles(this.innerPage).then((res)=>{
                    if(res.data.success){
                        if(res.data.data.length <= 0){
                            that.noData = true;
                        }else{
                            this.innerPage.page += 1;
                            this.articles = this.articles.concat(res.data.data);
                        }
                    }else{
                        that.$message({type: 'error', message: res.data.message, showClose: true})
                    }
                }).catch((err)=>{
                    //有报错
                    that.$message({type: 'error', message: '文章加载失败!', showClose: true})

                }).finally(()=>{
                    this.loading = false;
                });


            }
        },
        components: {
            'article-item': ArticleItem,
            'scroll-page': ScrollPage
        }

    }
</script>

<style scoped>
    .el-card {
        border-radius: 0;
    }

    .el-card:not(:first-child) {
        margin-top: 10px;

    }
</style>
